<template>
	<view v-if="data">
	<uni-nav-bar left-icon="back" left-text="返回" title="标题"></uni-nav-bar>
     <uni-list>
     	 <uni-list-item  v-for="(item,index) in data.data" :key="index" :to="`../goods-detail/goods-detail?lid=${item.lid}`" clickable>
     	        <template slot="body">
     	            <image class="slot-image" :src="'http://101.96.128.94:9999/' + item.pic" mode="widthFix"></image>
				  <view class="item">
					<text>{{item.title}}</text>
					<view>￥{{item.price}}</view>
				  </view>
     	        </template>
     	    </uni-list-item>
			
     </uni-list>
	 <uni-load-more :status="status"></uni-load-more>
	 
	 <!-- 返回顶部 -->
	 <view
	 	v-show="showGoTop"
	 	class="btn-gotop"
	 	hover-class="active"
	 	@click="doGoTop"
	 >
	</view>
	
		
	</view>
</template>

<script>

	export default {
		 
		data() {
			return {
				showGoTop: false,
				status:'more',
				url:'http://101.96.128.94:9999/data/product/list.php',
				data:null,
				pno:1,
			}
		},
		mounted() {
			this.getData();
			
		},
		methods: {
			doGoTop(){
				uni.pageScrollTo({
					scrollTop:0,
					duration:250
				})
			},
			getData(){
				uni.request({
					url:this.url,
					method: 'GET',
					data: {pn0:1},
					success: res => {
						console.log(res);
						this.data=res.data
					},
					fail: (err) => {
						console.log(err);
					},
					complete: () => {}
				});
			}
		},
		onPullDownRefresh() {
			uni.request({
				url: this.url,
				method: 'GET',
				data: {pno:1},
				success: res => {
					console.log(res)
					this.data=res.data;
					// tingzhi
					uni.stopPullDownRefresh();
					// 还原数据
					this.pno=1;
					this.status='more';
				},
				fail: (err) => {
					console.log(err);
				},
				complete: () => {
					
				}
			});
		},
		onReachBottom() {
			const {data,pageCount,pno}=this.data;
			if(pageCount==pno){
				this.status='Nomore';
				return;
			}
			if(this.status=='loading') return;
			this.status='loading';
			uni.request({
				url: this.url,
				method: 'GET',
				data: {pno:pno+1},
				success: res => {
					console.log(res);
					res.data.data=[...this.data.data,...res.data.data]
					// data中保存到外层一级，所以res也要给到外层级
					this.data=res.data
					this.status = 'more';

				},
				fail: (err) => {
					console.log(err);
					
				},
				complete: () => {}
			});
		},
		onPageScroll(e) {
			this.showGoTop=e.scrollTop>2000;
		}
	}
</script>

<style>
	/* list会自带一定的边距，需要手动负margin去除 */
image{
	padding: 10rpx;
}
.item{
	
	font-size: 30rpx;
}
.item>view{
	color: #007AFF;
	font-size: 20rpx;
}
</style>
